/*
    组合 VS 继承
*/

// 1.组件不能提前知道它们的子组件是什么，对于Sidebar或Dialog这类通用容器尤其常见。建议这些组件使用children属性将子元素直接传递到输出。

import React, { Component } from 'react';

/*
    <FancyBorder> JSX 标签内的任何内容都将通过 children 属性传入 FancyBorder。由于 FancyBorder 在一个 <div> 内渲染了 {props.children}，所以被传递的所有元素都会出现在最终输出中。
*/

function FancyBorder(props) {
    return (
        <div className={'FancyBorder FancyBorder-' + props.color}>
            我是CompositionAndInheritance组件(React 组合 vs 继承)
            {props.children}
        </div>
    );
}

function WelcomeDialog() {
    return (
        <FancyBorder color="blue">
            <p className="Dialog-title">
                我是FancyBorder组件中，props的children属性渲染出来的内容
            </p>
        </FancyBorder>
    );
}

class CompositionAndInheritance extends Component {

    render() {
        return (
            <div>
                <WelcomeDialog/>
            </div>
        )
    }
}

export default CompositionAndInheritance;